<template>
  <p>结果：{{ result }}</p>
  <button @click="handleBeginGame">开始</button>
  <!-- 总点数为3至10称作小，11至18为大 -->
  <p>
    猜大小：
    <input
      type="radio"
      name="bigness"
      @change="handleBignessChange"
      value="big"
    />大
    <input
      type="radio"
      name="bigness"
      @change="handleBignessChange"
      value="small"
    />小
  </p>
  <!-- 排除点数 -->
  <p>
    猜其他：
    <input
      type="checkbox"
      name="excludes"
      :value="[1, 1, 1]"
      @change="handleExcludesChange"
    />111
    <input
      type="checkbox"
      name="excludes"
      :value="[2, 2, 2]"
      @change="handleExcludesChange"
    />222
    <input
      type="checkbox"
      name="excludes"
      :value="[3, 3, 3]"
      @change="handleExcludesChange"
    />333
    <input
      type="checkbox"
      name="excludes"
      :value="[4, 4, 4]"
      @change="handleExcludesChange"
    />444
    <input
      type="checkbox"
      name="excludes"
      :value="[5, 5, 5]"
      @change="handleExcludesChange"
    />555
    <input
      type="checkbox"
      name="excludes"
      :value="[6, 6, 6]"
      @change="handleExcludesChange"
    />666
    <input
      type="checkbox"
      name="excludes"
      value="1,2,3"
      @change="handleExcludesChange"
    />123
    <input
      type="checkbox"
      name="excludes"
      value="2,3,4"
      @change="handleExcludesChange"
    />234
    <input
      type="checkbox"
      name="excludes"
      value="3,4,5"
      @change="handleExcludesChange"
    />345
    <input
      type="checkbox"
      name="excludes"
      value="4,5,6"
      @change="handleExcludesChange"
    />456
  </p>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from "vue";

const state = reactive<{
  result: [number, number, number];
  bigness?: "big" | "small";
  excludes?: Array<string>;
}>({
  result: [0, 0, 0],
  bigness: undefined,
  excludes: [],
});
// 穷举所有色子
const list: Array<[number, number, number]> = [];
for (let i = 1; i <= 6; i++) {
  for (let j = 1; j <= 6; j++) {
    for (let k = 1; k <= 6; k++) {
      list.push([i, j, k]);
    }
  }
}

function getRandom() {
  const { bigness, excludes } = state;
  const len = list.length;
  const random = ~~(Math.random() * len);
  let result = list[random];
  // 总点数为3至10称作小，11至18为大，存在则重新生成一组
  if (bigness) {
    const totle = result.reduce((totle, curr) => totle + curr, 0);
    if (
      (bigness === "small" && totle >= 3 && totle <= 10) ||
      (bigness === "big" && totle >= 11 && totle <= 18)
    ) {
      result = getRandom();
    }
  }
  // 存在排除列表中则重新生成一组
  if (excludes?.length) {
    const orderResult = [...result].sort((a, b) => a - b);
    const str = orderResult.join();
    if (excludes.includes(str)) {
      result = getRandom();
    }
  }
  return result;
}

function handleBignessChange(event: Event) {
  // @ts-ignore
  state.bigness = event.target?.value;
}

function handleExcludesChange(event: Event) {
  // @ts-ignore
  const val = event.target?.value;
  // @ts-ignore
  const checked = event.target?.checked;
  if (checked) {
    state.excludes?.push(val);
  } else {
    const index = state.excludes?.indexOf(val);
    index !== -1 && index !== undefined && state.excludes?.splice(index, 1);
  }
}

function handleBeginGame() {
  state.result = getRandom();
}
const { result } = toRefs(state);
</script>
